<template>
	<!-- 主题内容:卡片 -->
	<view class="main">
		<view class="main_top1">
		<image class="icon1" src="../../static/image/77.png"></image>
		<text>{{obj.date}} </text>
		</view>
		<view class="main_top1">
		<image class="icon1" src="../../static/image/91.png"></image>
		<text>{{obj.address}}</text>
		</view>
		<!-- z这是中间的图片区域的开始 -->
		<image class="banner"
		:src="obj.img"></image>
		<!-- 这是最下明的区域的开始 -->
		<view class="inner">
		<view class="left">
		<view class="title">
	  {{obj.goodsname}}
		</view>
		<text class="txt">&yen;{{obj.price}}/桌</text>
		</view>
		<!-- 这是右边区域的开始 -->
		<view class="right">
			
		<view class="serve" @click="btnPhone(obj.name,obj.tel)">
		<image  class="icon1" src="../../static/image/93.png"></image>
		<view >
		电话
		</view>
		</view>
		<view class="serve">
		<image class="icon1" src="../../static/image/93.png"></image>
		<view>服务</view>
		</view>
		</view>
		</view>
		<!-- 这是最下面的按钮的区域的开始 -->
		<button class="btn">
		我的账单
		</button>
	</view>
</template>

<script>
	export default{
		props:{
			obj:{
				type:Object,
				default:()=>{}
			}
		},
		methods:{
		btnPhone(name,tel){
		uni.showModal({
		    title: name,
		    content: tel,
		    success: function (res) {
		        if (res.confirm) {
		            console.log('用户点击确定');
					uni.makePhoneCall({
					    phoneNumber: tel //仅为示例
					});
		        } else if (res.cancel) {
		            console.log('用户点击取消');
		        }
		    }
		});
		}
		}
	}
</script>

<style lang="less" scoped>
.main{
	margin-top: 20px;
		padding: 0px 0px 15px 0px;
			box-sizing: border-box;
				
		box-shadow: 2px 2px 5px #ccc;
		.txt{
			color: rgba(255, 104, 85);
		}
		.main_top1{
			margin-left: 10px;
			color: #666;
		}
		.banner{
			width: 100%;
			height: 200px;
			margin-top: 8px;
		}
		.inner{
			box-sizing: border-box;
			padding: 0px 8px;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			.right{
					 display: flex;
				 text-align: center;
				 .serve{
					 margin-left: 8px;
					 color: #f0dcba;
				 }
			}
		}
		.btn{
			background-color: #ff6855;
			color: #fff;
			margin-top: 10px;
			margin: 10px 15px 0px;
			
		}
	}
	.icon1{
		
		width: 15px;
		height: 15px;
		vertical-align: middle;
		margin-right: 5px;
	}
	
</style>
